import {Table,Divider,Button,message} from 'antd';
import React,{useState,useEffect} from 'react';
import {GithubOutlined,RedditOutlined,CrownOutlined} from '@ant-design/icons'
import './index.scss';
import {useNavigate} from 'react-router-dom';
import store from '../../../store';
import {observer} from 'mobx-react';
const {Role} = store;
const RolePower = ()=>{
    const navgiate = useNavigate();
    // 角色
    const roleCol = [{
        key:'1',
        dataIndex: 'roleMark',
        title: '角色'
    }];
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const onSelectChange = (newSelectedRowKeys,selectedRows) => {
        setSelectedRowKeys(newSelectedRowKeys);
        // console.log([...Role.arrs]);
    };
    const roleSel = {
        selectedRowKeys,
        onChange: onSelectChange,
        type: 'radio'
    };
    // const [roleData,setRole] = useState([]);
    
    useEffect(()=>{
        Role.getRoles();
        Role.getAllTwoMenu();
    },[])
    // 权限
    const columns = [
        {
            key: '1',
            dataIndex: 'menuData',
            title: '菜单',
        },
    ];
    const data1 = Role.twoMenu.map(item=>{
        return {
            key: item.id,
            menuData: item.menuRemark
        }
    })
    const [selectData,setSelect] = useState([]);
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            setSelect(selectedRows)
        },        
        // selections: true,
        // defaultSelectedRowKeys:[...Role.arrs],
        onSelect: (record, selected, selectedRows) => {
        //   console.log(selectedRows);
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
        //   console.log(selected, selectedRows, changeRows);
        }
    };
    // 保存
    const saveBtn = ()=>{
        // console.log(selectData);
        // console.log(selectedRowKeys);
        Role.changePower(selectedRowKeys,selectData).then(
            data=>{
                console.log(data);
                if(data.code===200){
                    message.success('权限配置成功');
                    navgiate(-1);
                }else{
                    message.error('权限配置失败')
                }
            }
        )
    };
    // 取消
    const cancelBtn = ()=>{
        navgiate(-1);
    };
    return <div className='rolePower_div'>
    {/* 角色 */}
    <Table columns={roleCol} rowSelection={roleSel} rowKey={(record=>record.id)} dataSource={Role.roleData}
    className="rolePower_tab1" pagination={false}/>
    {/* 中间 */}
    <div className='rolePower_centerC'> <Divider plain orientation="center">
        <GithubOutlined />--<RedditOutlined />--<CrownOutlined />
    </Divider></div>
    {/* 权限 */}
    <Table
        columns={columns}
        rowSelection={{ ...rowSelection }}
        rowKey={(record)=>record.key}
        dataSource={data1}
        className="rolePower_tab2"
        pagination={false}
        scroll={{ y: 300 }}
    />
        <div className='role_bot'>
            <Button type='primary' onClick={saveBtn}>保存</Button>
            <Button className='role_btn' onClick={cancelBtn}>取消</Button>
        </div>
    </div>
}
export default observer(RolePower)